<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport"
		content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>注册</title>
	<script type="text/javascript" src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
	<script src="https://unpkg.com/vue-router@3.0.0/dist/vue-router.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<style type="text/css">
		#app {
			padding: 50px 40px 0 16px;
		}

		.img {
			display: flex;
			justify-content: center;
			padding: 0 0 50px 24px;
		}

		.c-btn {
			color: #fff;
			background: #FE5E83;
			display: block;
			line-height: 1;
			white-space: nowrap;
			cursor: pointer;
			border: 1px solid #dcdfe6;
			-webkit-appearance: none;
			text-align: center;
			box-sizing: border-box;
			outline: none;
			margin: 0;
			transition: .1s;
			font-weight: 500;
			-webkit-user-select: none;
			padding: 12px 20px;
			font-size: 14px;
			border-radius: 10px;
		}

		.img img {
			width: 30%;
			text-align: center;
			aspect-ratio: 1/1;
		}

		.yzm {
			width: 120px;
			height: 30px;
			color: #FE5E83;
			margin: 6px 0 0 10px;
			border: 1px solid #FE5E83;
			line-height: 30px;
			text-align: center;
			border-radius: 4px;
			font-size: 12px;
		}

		.btn {
			width: 220px;
			height: 40px;
			border-radius: 4px;
			text-align: center;
			line-height: 40px;
			background-color: #FE5E83;
			color: azure;
		}

		.c-btns {
			display: flex;
			font-size: 14px;
			margin-top: 20px;
			border-radius: 4px;
			overflow: hidden;
			color: white;
		}

		.c-btns .btn-label {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 60%;
			background-color: rgb(102, 102, 102, .6);
			background-color: rgb(102, 102, 102, .6);
			border-color: rgb(102, 102, 102, .6);
			line-height: 1;
			text-align: center;
			box-sizing: border-box;
			outline: none;
			margin: 0;
			font-weight: 500;
			padding: 10px 0;
			font-size: 14px;
		}

		i {
			font-size: 20px;
			margin-left: 10px;
		}

		.c-btns .c-m-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 20%;
			background-color: #FE5E83;
			border-color: #FE5E83;
			line-height: 1;
			white-space: nowrap;
			cursor: pointer;
			-webkit-appearance: none;
			text-align: center;
			box-sizing: border-box;
			outline: none;
			margin: 0;
			transition: .1s;
			font-weight: 500;
			-webkit-user-select: none;
			padding: 10px 0;
			font-size: 14px;
		}
	</style>
</head>

<body>
	<div id="app">
		<div class="img">
			<img id="myImage" src="" alt="">
		</div>
		<el-form ref="form" :model="form" :rules="rules" label-width="80px">
			<el-form-item label="手机号" prop="username">
				<el-input v-model="form.username" placeholder="请输入手机号"></el-input>
			</el-form-item>

			<el-form-item label="验证码" prop="code">
				<div style="display: flex">
					<el-input type="number" v-model="form.code" placeholder="请输入验证码"></el-input>
					<div class="yzm" v-if="showCode" @click.prevent="getCode">发送验证码</div>
					<div class="yzm" v-else>{{sendTime}}s重试</div>
				</div>
			</el-form-item>

			<el-form-item label="密码" prop="password">
				<el-input type="password" v-model="form.password" placeholder="密码为6-9位数字+字母组合"></el-input>
			</el-form-item>

			<el-form-item label="邀请码">
				<el-input v-model="form.inviteCode" placeholder="请输入邀请码" disabled="true"></el-input>
			</el-form-item>
			<div style="margin-top: 100px;padding-left: 24px;">
				<div class="c-btn" @click="submitForm('form')">
					注册
				</div>
				<div class="c-btns">
					<div class="btn-label"><span>下载app</span> <i class="el-icon-s-promotion"></i></div>
					<div class="c-m-btn" @click="toUp(1)" style="border-left: 1px solid white;"><img
							style="width: 20px;" src="./image/ios.png" alt="苹果"></div>
					<div class="c-m-btn" @click="toUp(2)" style="border-left: 1px solid white;"><img
							style="width: 20px;" src="./image/android.png" alt="安卓"></div>
				</div>
			</div>
		</el-form>
	</div>
</body>
<script type="text/javascript">
	var host = 'http://119.45.234.190:9888/'
	var validatorPhone = function (rule, value, callback) {
		console.log(rule);
		console.log(value);
		if (value === '') {
			callback(new Error('手机号不能为空'))
		} else if (!/^1\d{10}$/.test(value)) {
			callback(new Error('手机号格式错误'))
		} else {
			callback()
		}
	}
	const router = new VueRouter()
	new Vue({
		router,
		el: '#app',
		data() {
			return {
				url: host,
				inviteCode: '',
				sendTime: 60,
				showCode: true,
				show: false,
				form: {
					username: '',   //手机号
					password: '',   //密码
					code: '',       //验证码
					inviteCode: '请扫码获取邀请码' //邀请码
				},
				rules: {
					username: [{
						required: true,
						validator: validatorPhone,
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: "密码不能为空",
						trigger: 'blur'
					}],
					code: [{
						required: true,
						message: '验证码不能为空'
					}],
				},
				initis: false,
				textVal: ''
			}
		},
		mounted() {
			(function (doc, win) {
				const dpr = Math.min(win.devicePixelRatio, 3),
					scale = 1 / dpr,
					resizeEvent = 'orientationchange' in window ? 'orientationchange' : 'resize';
				var recalCulate = function () {
					var docEle = document.documentElement,
						w = docEle.clientWidth,
						num = (w > 750 ? 750 : w) / 750; // **此时的750就是你设计稿的尺寸
					docEle.style.fontSize = (num * 100).toFixed(1) + 'px';
				};
				recalCulate();
				if (!doc.addEventListener) return;
				win.addEventListener(resizeEvent, recalCulate, false);
			})(document, window);
		},
		created() {
			let params = this.getUrlParams()
			this.form.inviteCode = params.pid
			var image = document.getElementById("myImage");
			image.src = `./image/logo.png`;
		},
		methods: {
			getUrlParams() {
				var name, value
				var str = window.location.href;
				var num = str.indexOf("?")
				str = str.substr(num + 1);
				var arr = str.split("&");
				var obj = {}
				for (var i = 0; i < arr.length; i++) {
					num = arr[i].indexOf("=");
					if (num > 0) {
						name = arr[i].substring(0, num);
						value = arr[i].substr(num + 1);
						obj[name] = value;
					}
				}
				return obj
			},
			toUp(type) {
				if (type == 1) {
					window.location.href = "";
				} else {
					window.location.href = "";
				}
			},
			async getCode() {
				if (!/^1\d{10}$/.test(this.form.username)) return
				this.showCode = false
				let time = setInterval(() => {
					this.sendTime--
					if (this.sendTime <= 0) {
						clearInterval(time)
						this.sendTime = 60
						this.showCode = true
					}
				}, 1000)

				// axios.post(this.url + 'app/sendMessage', {
				// 	phonenumber: this.form.username
				// }).then((res) => {
				// 	if (res.data.code) {
				// 		this.$message.success(res.data.msg)
				// 	} else {
				// 		this.$message.error(res.data.msg)
				// 	}
				// })
				const formData = new FormData();
				formData.append('phonenumber', this.form.username);

				axios.post(this.url + 'app/sendMessage', formData, {
					headers: {
						'Content-Type': 'multipart/form-data'
					}
				}).then((res) => {
					if (res.data.code) {
						this.$message.success(res.data.msg)
					} else {
						this.$message.error(res.data.msg)
					}
				})
			},
			async submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						axios.post(this.url + 'app/newRegister', {
							username: this.form.username,
							code: this.form.code,
							password: this.form.password,
							inviteCode: this.form.inviteCode
						}).then(res => {
							if (res.data.code == 200) {
								this.form.username = ''
								this.form.password = ''
								this.form.code = ''
								this.$message.success('注册成功')
								const isAndroid = /Android/.test(navigator.userAgent);
								const isIOS = /iPhone|iPad/.test(navigator.userAgent);
								if (isAndroid) {
									this.toUp(0)
								} else if (isIOS) {
									this.toUp(1)
								} else {
									this.toUp(0)
								}
							} else {
								this.$message.error(res.data.msg)
							}
						})
					} else {
						return false;
					}
				});
			},
			// toiOS() {
			// 	let ua = navigator.userAgent.toLowerCase();
			// 	if (ua.match(/MicroMessenger/i) == "micromessenger"){
			// 		//是
			// 		this.show = true
			// 	} else {
			// 		window.location.href="http://www.chaojiqianming.info/userstall/install/testflight?code=qmyN8U5xh";
			// 	}
			// }
		}
	})
</script>

</html>
